import { computed, reactive } from 'vue'
import { getScrollbarWidth } from '@/utils'
import useScrollState from '@/utils/compositions/useScrollState'
import config from '@/config'
import useLayout from './useLayout'

/** 工具区域 */
export default function useTools({
  layout,
  scrollState
}: {
  layout: ReturnType<typeof useLayout>
  scrollState: ReturnType<typeof useScrollState>
}) {
  /** 滚动条宽度 */
  const scrollbarWidth = getScrollbarWidth()

  /**
   * 工具栏样式
   * 布局说明：
   * 1. 组件查看区域宽度大于文档最大宽度时：工具栏相对文档定位
   * 2. 组件查看区域宽度小于文档最大宽度时：工具栏相对滚动元素定位
   * 3. 纵向工具栏由于本身宽度占据空间，计算时需要补偿
   */
  const toolStyle = computed(() => {
    const { isToolsYFixed, hasScrollerX, docAreaZoomWidth } = layout
    const isFixed = isToolsYFixed
    const bottom = hasScrollerX ? `${scrollbarWidth}px` : 0
    const right = `${scrollbarWidth}px`

    return {
      /** 左侧工具栏 */
      left: isFixed
        ? {
            bottom
          }
        : {
            marginLeft: `${docAreaZoomWidth / 2 - scrollbarWidth / 2}px`
          },

      /** 右侧工具栏 */
      right: isFixed
        ? {
            right,
            bottom
          }
        : {
            marginLeft: `${docAreaZoomWidth / 2 - scrollbarWidth / 2}px`
          }
    }
  })

  /** 工具区域 */
  return reactive({
    /** 工具区域样式 */
    style: toolStyle,

    /** 滚动到顶部按钮可见 */
    scrollTopVisible: computed(() => scrollState.scrollTop > config.scrollButtonVisibleDistance),

    /** 滚动到底部按钮可见 */
    scrollBottomVisible: computed(() => {
      const { scrollTop, scrollHeight, height } = scrollState
      return scrollTop < scrollHeight - height - config.scrollButtonVisibleDistance
    })
  })
}
